<template>
  <div>
    <el-alert :title="`数据一共${total}条`" type="info" show-icon></el-alert>
    <el-table :data="questionList" style="width: 100%" max-height="250">
      <el-table-column fixed prop="number" label="试题编号" width="150px">
      </el-table-column>
      <el-table-column prop="subjectID" label="学科" width="120px">
      </el-table-column>
      <el-table-column prop="catalogID" label="目录" width="120px">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="120"
        :formatter="formatQuestionType"
      >
      </el-table-column>
      <el-table-column label="题干" width="300px">
        <template slot-scope="scope">
          {{ scope.row.question | html2Text }}
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="120px">
        <template slot-scope="scope">
          {{ scope.row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="120"
        :formatter="formatDifficultyType"
      >
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120px">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120px">
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120px">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120px">
      </el-table-column>
      <el-table-column label="发布状态" width="120px">
        <template slot-scope="scope">
          {{ scope.row.publishState === 0 ? "已发布" : "待发布" }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200px">
        <template slot-scope="scope">
          <div align="center" justify="space-btween">
            <!-- <el-row :gutter="10" align="center" justify="space-btween"> -->
            <!-- <el-col :span="6"> -->
            <el-button type="text" size="small" @click="btnPreview(scope.row)"> 预览 </el-button>
            <!-- </el-col> -->
            <!-- <el-col :span="6"> -->
            <el-button
              type="text"
              style="margin-right: '10px'"
              size="small"
              :disabled="scope.row.chkState !== 0"
              @click="changeChk(scope.row)"
            >
              审核
            </el-button>
            <el-button
              :disabled="scope.row.publishState !== 0"
              type="text"
              size="small"
              @click="toOther(scope.row)"
            >
              修改
            </el-button>
            <!-- </el-col> -->
            <!-- <el-col :span="6"> -->
            <el-button type="text" size="small" @click="open(scope.row)">
              {{ scope.row.publishState === 0 ? "下架" : "上架" }}
            </el-button>
            <!-- </el-col> -->
            <!-- <el-col :span="6"> -->
            <el-button
              type="text"
              size="small"
              @click="deleteList({ id: scope.row.id })"
            >
              删除
            </el-button>
            <!-- </el-col> -->
            <!-- </el-row> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="changePager"
          :current-page-sync="Pages.page"
          :page-sizes="[2, 10, 15, 20]"
          :page-size="Pages.pagesize"
          layout=" prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="题目审核" :visible.sync="showDialoger" width="30%" center>
      <el-form :model="formData" :rules="rules" ref="chkDialog">
        <el-form-item>
          <el-radio-group v-model="formData.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="chkRemarks">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核内容"
            v-model="formData.chkRemarks"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" @click="btnSure">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <questions-preview ref="subject" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import { chkType, difficulty, questionType } from '@/api/hmmm/constants'
import {
  choice as getListChoice,
  remove,
  choiceCheck
} from '@/api/hmmm/questions'
import questionsPreview from './questions-preview.vue'
export default {
  data () {
    return {
      // result1: 1,
      // result2: 2,
      total: 0,
      showDialoger: false,
      showDialog: false,
      chkType, // 审核状态
      questionList: [],
      textarea: '',
      // radio: null,
      textarea1: '',
      showChk: false,
      dataId: '',
      showChks: false,
      centerDialogVisible: false,
      floor: '',
      tabelData: {},
      formData: {
        chkRemarks: '',
        chkState: '',
        id: ''
      },
      Pages: {
        page: 1,
        pagesize: 2
      },
      difficulty,
      questionType,
      rules: {
        chkRemarks: [
          { required: true, message: '信息不能为空', trigger: 'blur' }
        ]
      },
      currentTabType: 'first'
    }
  },
  components: { questionsPreview },
  created () {
    this.getListChoice('first')
  },
  props: ['searchResult'],
  methods: {
    async btnPreview (data) {
      this.showDialog = true
      await this.$refs.subject.detail(data) // 调用父组件的方法
    },
    // 关闭弹窗
    btnCancel () {
      this.showDialoger = false
    },
    async getListChoice (id = 'first') {
      console.log(id)
      // this.Pages.page = 1
      this.Pages = { ...this.Pages, ...this.searchResult }
      if (id === 'first') {
        console.log(this.Pages)
        this.currentTab = 'first'
        const { data } = await getListChoice(this.Pages)
        this.questionList = data.items
        this.Pages.page = 1
        this.total = data.counts
      } else if (id === 'second') {
        this.currentTab = 'second'
        const { data } = await getListChoice({ ...this.Pages, chkState: 0 })
        this.questionList = data.items
        this.Pages.page = 1
        this.total = data.counts
      } else if (id === 'third') {
        this.currentTab = 'third'
        const { data } = await getListChoice({ ...this.Pages, chkState: 1 })
        this.questionList = data.items
        this.Pages.page = 1
        this.total = data.counts
      } else if (id === 'forth') {
        this.currentTab = 'forth'
        const { data } = await getListChoice({ ...this.Pages, chkState: 2 })
        this.questionList = data.items
        this.Pages.page = 1
        this.total = data.counts
      }
      // const { data } = await getListChoice(this.Pages)
      // this.questionList = data.items
      // this.total = data.counts
      // console.log(data.items.length)
      // console.log(123)
      console.log(this.questionList)
    },
    async deleteList (data) {
      this.$confirm('您确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          remove(data)
          this.getListChoice(this.currentTab)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功!'
          })
        })
    },
    // 改变页容量
    handleSizeChange (val) {
      this.Pages.page = 1
      this.Pages.pagesize = val
      this.getListChoice(this.currentTab)
    },
    formatDifficultyType (row, column, cellValue, index) {
      const obj = this.difficulty.find((item) => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    formatQuestionType (row, column, cellValue, index) {
      const obj = this.questionType.find((item) => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 审核
    changeChk (val) {
      this.showDialoger = true
      // console.log(this.result1)
      console.log(val)
      // this.formData = await choiceCheck({ id: val, chkState: this.chkState, chkRemarks: this.chkRemarks })
      // console.log(val.chkState)
      // console.log(val.chkRemarks)
      this.radio = val.chkState
      this.formData.chkRemarks = val.chkRemarks
      this.formData.chkState = val.chkState
      this.formData.id = val.id
      console.log(this.radio)
      // console.log(this.chkRemarks)
    },
    async btnSure () {
      // if (this.formData.chkRemarks === '' && this.formData.chkState === '') {
      //   return this.$message.warning('请输入审核意见')
      // }
      await this.$refs.chkDialog.validate()
      // console.log(this.formData.id)
      await choiceCheck({
        id: this.formData.id,
        chkState: this.formData.chkState,
        chkRemarks: this.formData.chkRemarks
      })
      this.$message.success('审核成功')
      this.getListChoice(this.currentTab)
      // await this.loadChoiceList(this.form)
      this.showDialoger = false
    },
    // 改变页码
    changePager (val) {
      console.log(this.currentTabType)
      this.Pages.page = val
      // if (val === 1) {
      // this.currentValType = 'first'
      this.getListChoice(this.currentTabType)
      // }
      // if (val === 2) {
      //   this.currentValType = 'second'
      //   this.getListChoice(this.currentValType)
      // }
      // if (val === 3) {
      //   this.currentValType = 'third'
      //   this.getListChoice(this.currentValType)
      // }
      // if (val === 4) {
      //   this.currentValType = 'forth'
      //   this.getListChoice(this.currentValType)
      // }
    },
    toOther (row) {
      const { id } = row
      this.$router.push({ path: '/questions/new', query: { id } })
      // console.log(this.showChk)
    },
    async open (row) {
      console.log(row)
      // console.log(this.items.publishState)
      // console.log(this.questionList)
      // const data = await this.get=ListChoice()
      console.log(row.publishState)
      const shelf = row.publishState === 0 ? '下架' : '上架'
      console.log(shelf)
      // console.log(data)
      this.$confirm(`您确认${shelf}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: `${shelf}成功!`
          })
          if (row.publishState === 0) {
            row.publishState = 1
          } else {
            row.publishState = 0
          }
          this.showChk = !this.showChk
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功!'
          })
        })
    }
  }
}
</script>
